<template>
	<view>

		<view class="waterfall-box h-flex-x h-flex-2">
			<view>
				<helang-waterfall v-for="(item,index) in leftList" :key="index" :params="item" tag="left" :index="index"
					@height="onHeight" @click.stop="onClick" :bg="bg" :getCun='getCun' :setAShow='getShow' :statue='statue' :ids='ids'></helang-waterfall>
			</view>
			<view>
				<helang-waterfall v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
					@click.shop="onClick" tag="right" :index="index" :bg="bg" :getCun='getCun' :setAShow='getShow' :statue='statue' :ids='ids'></helang-waterfall>
			</view>
		</view>
		<view class="load-txt">{{ajax.loadTxt}}</view>
		
	</view>
</template>

<script>
	let that;
	import helangWaterfall from "@/components/helang-waterfall/helang-waterfall.vue"
	export default {
		components: {
			"helang-waterfall": helangWaterfall,
		},
		props: {
			ajax: {
				type: Object,
				default: () => {
					return {
						load: true,
						loadTxt: '',
					}
				}
			},
			setShow:{
				type: Function,
				default: () => {}
			},
			statue:{
				type: Boolean,
				default: false
			},
			cun: {
				type: Function,
				default: () => {}
			},
			bg:{
				type:String,
				default:''
			},
			ids: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				title: '',
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				// ajax: {
				// 	// 是否可以加载
				// 	load: true,
				// 	// 加载中提示文字
				// 	loadTxt: '',
				// 	// 每页的请求条件
				// 	limit:10,
				// 	// 页码
				// 	page:1,
				// 	cateId:0,
				// 	keyword:''
				// }
			}
		},
created() {
	that = this
},

		// 下拉刷新

		methods: {
             getShow(e){
				 console.log('show',e);
				that.setShow(e)
			 },
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			getCun(e){
				
				that.cun(e)
				// this.$emit('cun',e)
			},
			// 组件点击事件
			onClick(params) {
				
				console.log(params);
				// 对应的数据
				if (params.tag == 'left') {
					this.goProduct(this.leftList[params.index].id)
				} else {
					this.goProduct(this.rightList[params.index].id)
				}

			},
			goProduct(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
			},
			addList(res) {
				// 获取到的数据，请注意数据结构



				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];


				// 获取插入的方向
				let getDirection = (index) => {
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					// if(differ>= 600 && index < 3){
					// 	differVal = 1;
					// 	return 'right';
					// }

					// /* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					// if(differ <= -600 && index < 3){
					// 	differVal = -1;
					// 	return 'left';
					// }

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if (differ >= 350 && index < 2) {
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if (differ <= -350 && index < 2) {
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i + differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}
				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.forEach((item, index) => {
					if (getDirection(index) == 'left') {
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					} else {
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				// 将左右列表的数据插入，第一页时则覆盖
				if (this.ajax.page == 1) {
					this.leftList = left;
					this.rightList = right;
					uni.stopPullDownRefresh();
				} else {
					this.leftList = [...this.leftList, ...left];
					this.rightList = [...this.rightList, ...right];
				}


			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>

<style lang="scss" scoped>
	.waterfall-box {
		padding: 10rpx 0rpx;
		box-sizing: border-box;

		>view {
			padding: 0 10rpx;
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: calc(50% - 10rpx);
			}
		}
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>
